<template>
  <div class="bidding">
    <div class="mailDialog-module">
      <el-dialog
        :title="$t('bidding.email')"
        :visible.sync="mailDialogVisible"
        custom-class="bidding-dialog"
        width="900px">
        <div class="key-div">
          <div class="key-word">
            <div class="type-title">{{$t('bidding.keyWords')}}:</div>
            <div class="fr-div">
              <span class="type-item" v-for="(item, index) in keyWords"
                    :class="{'type-selected': false}">{{item}}</span>
            </div>
          </div>
        </div>
        <!--<div class="mail-div">-->
        <!--<span style="margin-right: 40px; color: #000; font-size: 16px; font-weight: bold">{{$t('bidding.receiveEmial')}}:</span>-->
        <!--<el-input-->
        <!--:placeholder="$t('bidding.please')"-->
        <!--v-model="mailAddress"-->
        <!--clearable>-->
        <!--</el-input>-->
        <!--</div>-->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="mailDialogVisible = false">{{$t("bidding.submit")}}</el-button>
          <div style="color: #f33; font-size: 14px; margin-top: 20px;">*{{$t('bidding.please')}}</div>
        </span>
      </el-dialog>
    </div>
    <div class="detailDialog-module">
      <el-dialog
        :visible.sync="detailDialogVisible"
        custom-class="bidding-dialog"
        width="90%">
        <span slot="title" class="dialog-title">
          <i class="iconfont icon-xingxing1 fs27" :class="{'collection-detail': collectionDetail === 1}"
             @click="addCollection(collectionDetail)"></i>添加收藏
        </span>
        <div class="content">
          <!--这里写详细内容...-->
          <!--<template v-for="(item, index) in detailContent">-->
          <!--<div v-html="item"></div>-->
          <!--</template>-->
          <div style="font-size: 20px; font-weight: bold; margin-bottom: 20px;">{{detailTitle}}</div>
          <!--<div ref="module"></div>-->
          <div v-html="detailContent"></div>
        </div>
        <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button type="primary" @click="detailDialogVisible = false">提 交</el-button>-->
        <!--</span>-->
      </el-dialog>
    </div>
    <div class="title-module">
      <h2 style="font-family: OpenSans-CondensedBold; font-size: 20px; color: #FF5B00; font-weight: bold;">{{$t('bidding.biddingTitle')}}</h2>
      <p style="font-family: Helvetica-Bold; font-size: 14px; color: #108EE9; font-weight: bold;">
        <!--<span @click="showMailDialog">{{$t('bidding.email')}}</span> <span>|</span>-->
        <span @click="jumpCollection">{{$t('bidding.myCollection')}}</span>
      </p>
    </div>
    <div class="search-module">
      <div class="input-div">
        <el-input v-model.trim="searchValue" clearable @keyup.enter.native="handleSearch(searchValue)" placeholder="请输入产品标签">
          <el-button slot="append" @click="handleSearch(searchValue)" style="color: #fff; width: 70px; padding: 5px 10px;">{{$t('bidding.search')}}
          </el-button>
        </el-input>
      </div>
      <div class="tag-div">
        <span v-for="(item, index) in searchTipsTag" class="tag-item" @click="handleSearch(item)">{{item}}</span>
        <!--<span v-show="searchTipsTag.length !== 0 && searchTipsTag[0] !== ''" class="delete" @click="deleteAll">{{$t('bidding.delete')}}</span>-->
        <span v-show="searchTipsTag.length !== 0 && searchTipsTag[0] !== ''" class="delete" @click="deleteAll">
          <i class="el-icon-delete" style="font-size: 14px; margin-left: 10px; color: #0090e9;"></i>
        </span>
      </div>
      <div class="key-div">
        <div class="key-word">
          <div class="type-title" @click="selectAllPcg">PCG:</div>
          <div class="type-detial">
            <span class="type-item" v-for="(item, index) in pcgData" :class="{'type-selected': item.flag === true}"
                  @click="selectedTypePcg(item)">{{item.value}}</span>
          </div>
          <!--<div class="fr-div">-->
          <!--<span class="type-item" v-for="(item, index) in keyWords" :class="{'type-selected': keyWordsParams.indexOf(item) !== -1}" @click="selectedType(item)">{{item}}</span>-->
          <!--</div>-->
        </div>
        <div class="key-word">
          <div class="type-title" @click="selectAllDcg">DCG:</div>
          <div class="type-detial">
            <span class="type-item" v-for="(item, index) in dcgData" :class="{'type-selected': item.flag === true}"
                  @click="selectedTypeDcg(item)">{{item.value}}</span>
          </div>
        </div>
        <div class="key-word">
          <div class="type-title" @click="selectAllLabel">Label:</div>
          <div class="type-detial">
            <span class="type-item" v-for="(item, index) in labelData.slice(0, 12)"
                  :class="{'type-selected': item.flag === true}" @click="selectedTypeLabel(item)">{{item.value}}</span>
            <a href="javascript:;" class="text-btn" @click="toggleText">{{isShowMore ? $t('bidding.collapse') : $t('bidding.more')}}</a>
          </div>
          <div class="type-detial" v-show="isShowMore">
            <span class="type-item" v-for="(item, index) in labelData.slice(12)"
                  :class="{'type-selected': item.flag === true}" @click="selectedTypeLabel(item)">{{item.value}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="select-module">
      <el-row>
        <el-col :span="6" :offset="0">
          <div class="child-module region-div" v-clickoutside="handleClickOutSide">
            <span>{{$t('bidding.region')}}</span>
            <el-input @click.native="handleShowTree" v-model="treeValue" :disabled="true"
                      :placeholder="$t('bidding.regionPlease')">
              <i
                class="el-select__caret el-input__icon" :class="iconArrow"
                slot="suffix">
              </i>
            </el-input>
            <cbi-tree
              :class="{show: showTree}"
              :data="regionDatas"
              show-checkbox
              node-key="label"
              ref="tree"
              :placeholder="$t('bidding.placeholder2')"
              @check="getTreeState">
            </cbi-tree>
            <!--<el-tree-->
            <!--:class="{show: showTree}"-->
            <!--:data="regionDatas"-->
            <!--show-checkbox-->
            <!--node-key="label"-->
            <!--ref="tree"-->
            <!--:placeholder="$t('bidding.placeholder2')"-->
            <!--@check="getTreeState">-->
            <!--</el-tree>-->
          </div>
        </el-col>
        <el-col :span="6">
          <div class="child-module">
            <span>{{$t('bidding.type')}}</span>
            <el-select v-model="announcementValue" clearable multiple collapse-tags @change="changeType" :placeholder="$t('bidding.typePlease')">
              <el-option
                v-for="item in announcementOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="10" :offset="0">
          <div class="child-module">
            <span>{{$t('bidding.time')}}</span>
            <el-date-picker
              v-model="timeRange"
              @change="changeTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              :range-separator="$t('bidding.to')"
              :start-placeholder="$t('bidding.startTime')"
              :end-placeholder="$t('bidding.endTime')">
            </el-date-picker>
          </div>
        </el-col>
        <!--<el-col :span="2" :offset="0">-->
          <!--<el-button type="primary" @click="resetFilterSearch()">{{$t('bidding.filter')}}</el-button>-->
        <!--</el-col>-->
      </el-row>
    </div>
    <BiddingItem @getDetail="showDetail" :propsData="biddingItems" v-loading="showLoading"></BiddingItem>
    <div class="paging-module" v-if="biddingItems.length !== 0 && paginationFlag">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPageValue"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="showNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import BiddingItem from './components/biddingItem'
  import clickoutside from './clickoutside'
  import {getUsername, setBiddingParams} from "../../../utils/auth";
  import cbiTree from '../../../components/tree/src/tree.vue'

  export default {
    components: {
      BiddingItem,
      cbiTree
    },
    directives: {
      'clickoutside': clickoutside
    },
    data() {
      return {
        paginationFlag: false, // 分页初始化时不展示
        treeValue: '',
        showTree: false, //树形控件展示与否
        iconArrow: 'el-icon-arrow-down', //输入框尾部图标
        presentIndex: null,
        showLoading: false,
        mailAddress: '',
        searchValue: '', // 搜索框的值
        mailDialogVisible: false, // 弹框
        detailDialogVisible: false,
        collectionDetail: 0, // 收藏
        searchTipsTag: [],
        typeData: [
          {
            value: '笔记本',
            belong: 'IDG',
            flag: false
          },
          {
            value: '台式机',
            belong: 'IDG',
            flag: false
          },
          {
            value: '手机',
            belong: 'IDG',
            flag: false
          },
          {
            value: '显示器',
            belong: 'IDG',
            flag: false
          },
          {
            value: '平板',
            belong: 'IDG',
            flag: false
          },
          {
            value: '打印机',
            belong: 'IDG',
            flag: false
          },
          {
            value: '电视机',
            belong: 'IDG',
            flag: false
          },
          {
            value: '工作站',
            belong: 'DCG',
            flag: false
          },
          {
            value: '服务器',
            belong: 'DCG',
            flag: false
          },
          {
            value: '存储',
            belong: 'DCG',
            flag: false
          }
        ],
        selectNotBelong: '',
        selectedTypeData: [],
        selectedTypePcgData: [],
        selectedTypeDcgData: [],
        selectedTypeLabelData: [],
        announcementValue: ['招标公告'],// 公告
        announcementOptions: [],
        regionValue: [], // 地区
        regionValueParams: [], // 拼接格式后的地区
        regionOptions: [],
        regionDatas: [
          {
            label: '北京',
            children: [
              {
                label: '北京市',
                value: '哈哈',
                children: [
                  {
                    label: '昌平区'
                  },
                  {
                    label: '海淀区'
                  }
                ]
              },
              {
                label: '东城区'
              }
            ]
          },
          {
            label: '安徽',
            children: [{
              label: '二级 2-1',
              children: [{
                label: '三级 2-1-1'
              }]
            }, {
              label: '二级 2-2',
              children: [{
                label: '三级 2-2-1'
              }]
            }]
          }, {
            label: '一级 3',
            children: [{
              label: '二级 3-1',
              children: [{
                label: '三级 3-1-1'
              }]
            }, {
              label: '二级 3-2',
              children: [{
                label: '三级 3-2-1'
              }]
            }]
          }
        ],
        timeRange: [],
        // 分页
        currentPageValue: 1,
        totalCount: null,
        showNum: 10,
        // bu状态
        buState: null,
        biddingItems: [], // 搜索结果
        keyWords: [], // 关键词
        keyWordsParams: [],
        detailContent: '', //详细内容弹框里的内容
        detailTitle: '',
        detailParams: {}, //传过来的详情参数
        pcgData: [],
        dcgData: [],
        labelData: [],
        isShowMore: false,
        level1Arr: [], // 省
        level2Arr: [], // 市
        level3Arr: [], // 县
        selectAllPcgFlag: false,
        selectAllDcgFlag: false,
        selectAllLabelFlag: false,
      }
    },
    methods: {
      changeTime(params) {
        // console.log(params, '时间')
        if (params === null) {
          this.timeRange = []
        } else {
          this.timeRange = params
        }
        this.resetFilterSearch()
      },
      changeType(params) {
        this.announcementValue = params
        this.resetFilterSearch()
      },
      toggleText() {
        this.isShowMore = !this.isShowMore
      },
      handleClickOutSide() {
        this.showTree = false
      },
      handleShowTree() {
        this.showTree = !this.showTree
        if (this.showTree) {
          this.iconArrow = 'el-icon-arrow-up'
        } else {
          this.iconArrow = 'el-icon-arrow-down'
        }
      },
      getTreeState(dataObj, state, have) {
        console.log(dataObj, 1)
        console.log(state, 2)
        // console.log(this.$refs.tree.getCheckedNodes(),3)
        let currentStates = this.$refs.tree.getCheckedNodes()
        this.level1Arr = []
        this.level2Arr = []
        this.level3Arr = []
        currentStates.forEach(item => {
          switch (item.level) {
            case 1:
              this.level1Arr.push(item.value)
              break
            case 2:
              this.level2Arr.push(item.value)
              break
            case 3:
              this.level3Arr.push(item.value)
              break
          }
        })
        this.resetFilterSearch()

        let arr = []
        if (currentStates.length) {
          arr = currentStates.map(item => {
            return item.label
          })
          this.treeValue = arr.join()
        } else {
          this.treeValue = ''
          this.regionValueParams = []
        }
      },
      showMailDialog() {
        this.mailDialogVisible = true
      },
      jumpCollection() {
        this.$router.push({path: 'MyCollection'})
      },
      changeBu(num) {
        if (num === this.buState) {
          return
        } else {
          this.buState = num;
          if (this.buState === 1) {
            this.selectNotBelong = 'DCG'
          } else {
            this.selectNotBelong = 'IDG'
          }
        }
      },
      selectedType(item) {
        let num = this.keyWordsParams.indexOf(item)
        if (num === -1) {
          console.log('没有')
          this.keyWordsParams.push(item)
        } else {
          this.keyWordsParams.splice(num, 1)
          // console.log('有了')
        }
        this.handleSearch()

        // if (item.belong !== this.selectNotBelong) {
        //   // 点的是可以操作的
        //   item.flag = !item.flag
        //   if (item.flag) {
        //     this.selectedTypeData.push(item)
        //   } else {
        //     for (let i in this.selectedTypeData) {
        //       if (this.selectedTypeData[i].value === item.value) {
        //         this.selectedTypeData.splice(i, 1)
        //       }
        //     }
        //   }
        // } else {
        //   // 点的是不可以操作的
        //   console.log('不做处理')
        //   return
        // }
        // console.log('已选数组')
        // console.log(this.selectedTypeData)
      },
      selectedTypePcg(item) {
        item.flag = !item.flag
        if (item.flag === true) {
          this.selectedTypePcgData.push(item.value)
        } else {
          this.selectedTypePcgData.splice(this.selectedTypePcgData.indexOf(item.value), 1)
        }
        this.handleSearch2()
      },
      selectedTypeDcg(item) {
        item.flag = !item.flag
        if (item.flag === true) {
          this.selectedTypeDcgData.push(item.value)
        } else {
          this.selectedTypeDcgData.splice(this.selectedTypeDcgData.indexOf(item.value), 1)
        }
        this.handleSearch2()
      },
      selectedTypeLabel(item) {
        item.flag = !item.flag
        if (item.flag === true) {
          this.selectedTypeLabelData.push(item.value)
        } else {
          this.selectedTypeLabelData.splice(this.selectedTypeLabelData.indexOf(item.value), 1)
        }
        this.handleSearch2()
      },
      selectAllPcg() {
        if (this.selectAllPcgFlag === false) {
          // 变样式
          this.pcgData.forEach(item => {
            item.flag = true
          })
          // 加数据传值
          this.selectedTypePcgData = this.pcgData.map(item => {
            return item.value
          })
          this.selectAllPcgFlag = true
        } else {
          // 变样式
          this.pcgData.forEach(item => {
            item.flag = false
          })
          // 减数据传值
          this.selectedTypePcgData = []
          this.selectAllPcgFlag = false
        }
        this.handleSearch2()
      },
      selectAllDcg() {
        if (this.selectAllDcgFlag === false) {
          // 变样式
          this.dcgData.forEach(item => {
            item.flag = true
          })
          // 加数据传值
          this.selectedTypeDcgData = this.dcgData.map(item => {
            return item.value
          })
          this.selectAllDcgFlag = true
        } else {
          // 变样式
          this.dcgData.forEach(item => {
            item.flag = false
          })
          // 减数据传值
          this.selectedTypeDcgData = []
          this.selectAllDcgFlag = false
        }
        this.handleSearch2()
      },
      selectAllLabel() {
        if (this.selectAllLabelFlag === false) {
          // 变样式
          this.labelgData.forEach(item => {
            item.flag = true
          })
          // 加数据传值
          this.selectedTypeLabelData = this.labelData.map(item => {
            return item.value
          })
          this.selectAllLabelFlag = true
        } else {
          // 变样式
          this.labelData.forEach(item => {
            item.flag = false
          })
          // 减数据传值
          this.selectedTypeLabelData = []
          this.selectAllLabelFlag = false
        }
        this.handleSearch2()
      },
      showDetail(params) {
        // console.log(`子组件传过来的公司名称值${params.uuid}`)
        console.log(params, '好的话')
        let uuid = params.uuid
        setBiddingParams(JSON.stringify(params))
        if (params.status === '招标公告') {
          this.$router.push({path: '/BusinessInsight/TenderDetails', query: {id: uuid}})
        } else if (params.status === '中标公告') {
          this.$router.push({path: '/BusinessInsight/BidDetails', query: {id: uuid}})
        } else {
          this.$router.push({path: '/BusinessInsight/OtherDetails', query: {id: uuid}})
        }
        // this.detailParams = params
        // this.collectionDetail = params.collect
        // this.loadDetail(params.uuid)
        // this.detailTitle = params.title

        // this.detailDialogVisible = true
        // this.$router.push({path: '/BusinessInsight/TenderDetails'})
      },
      async addCollection(index) {
        // console.log(index)
        this.collectionDetail = index === 1 ? 0 : 1
        let params = {
          bulletin_id: this.detailParams.uuid,
          bulletin_name: this.detailParams.title,
          bulletin_type: this.detailParams.status,
          region: this.detailParams.area_name,
          publish_time: this.detailParams.publish_date
        }
        let res = await this.axios.post('bidding/addAndDeleteCollection', params)
        this.handleSearch(this.searchValue)
        if (this.collectionDetail === 1) {
          this.$message({
            message: '收藏成功',
            type: 'success',
            duration: 1000
          })
        } else {
          this.$message({
            message: '取消收藏',
            type: 'info',
            duration: 1000
          })
        }
      },
      handleChange(params) {
        console.log(params)
        if (params.length !== 0) {
          let paramsStr = `${params[0]}-${params[1]}-${params[2]}`
          this.regionValueParams = [paramsStr]
        } else {
          this.regionValueParams = []
        }
        console.log(this.regionValueParams)
      },
      handleSizeChange(params) {
        // console.log(params)
        this.showNum = params
        this.filterSearch() // 不能用handleSearch，因为要保留筛选状态。
        window.scrollTo(0, 330)
      },
      handleCurrentChange(params) {
        // console.log(params)
        this.currentPageValue = params
        this.filterSearch()
        window.scrollTo(0, 330)
      },
      // api接口
      // 搜索接口
      async handleSearch(search_value = this.searchValue) {
        this.searchValue = search_value
        this.currentPageValue = 1
        this.showNum = 10
        // if (this.searchValue !== '') {
        if (true) {
          this.showLoading = true
          // 置空
          this.announcementValue = []
          this.regionValueParams = []
          this.treeValue = ''
          this.regionValue = []
          this.timeRange = []
          this.$refs.tree.setCheckedKeys([])

          this.selectedTypePcgData = []
          this.selectedTypeDcgData = []
          this.selectedTypeLabelData = []
          this.level1Arr = []
          this.level2Arr = []
          this.level3Arr = []
          // flag改为false，为了统一样式
          this.pcgData.forEach(item => {
            item.flag = false
          })
          this.dcgData.forEach(item => {
            item.flag = false
          })
          this.labelData.forEach(item => {
            item.flag = false
          })

          // this.$refs.tree.setCheckedNodes([])
          // this.keyWordsParams = []
          let params = {
            lenovoProduct: this.selectedTypePcgData,
            dcgProduct: this.selectedTypeDcgData,
            tags: this.selectedTypeLabelData,
            status: this.announcementValue,
            // type: '招标',
            search_value: this.searchValue,
            page: this.currentPageValue,
            pageSize: this.showNum,
            username: getUsername(),
            countys: this.level3Arr,
            provinces: this.level1Arr,
            citys: this.level2Arr,
            publish_date: this.timeRange,
          }
          // console.log(params)
          let res = await this.axios.post('newBidding/search', params)
          // console.log('哈哈')
          // console.log(res)
          if (res.data.data.count) {
            this.totalCount = res.data.data.count
            this.biddingItems = res.data.data.rows
            this.paginationFlag = true
            // console.log('哈哈')
            // console.log(this.biddingItems)
          } else {
            console.log('搜索结果为0')
          }
          this.handleHistorySearch()
          this.showLoading = false
        }
      },
      async handleSearch2(search_value = this.searchValue) {
        this.searchValue = search_value
        this.currentPageValue = 1
        this.showNum = 10
        // if (this.searchValue !== '') {
        if (true) {
          this.showLoading = true
          // 置空
          this.announcementValue = []
          this.regionValueParams = []
          this.treeValue = ''
          this.regionValue = []
          this.timeRange = []
          this.$refs.tree.setCheckedKeys([])

          this.level1Arr = []
          this.level2Arr = []
          this.level3Arr = []

          // this.$refs.tree.setCheckedNodes([])
          // this.keyWordsParams = []
          let params = {
            lenovoProduct: this.selectedTypePcgData,
            dcgProduct: this.selectedTypeDcgData,
            tags: this.selectedTypeLabelData,
            status: this.announcementValue,
            // type: '招标',
            search_value: this.searchValue,
            page: this.currentPageValue,
            pageSize: this.showNum,
            username: getUsername(),
            countys: this.level3Arr,
            provinces: this.level1Arr,
            citys: this.level2Arr,
            publish_date: this.timeRange,
          }
          // console.log(params)
          let res = await this.axios.post('newBidding/search', params)
          // console.log('哈哈')
          // console.log(res)
          if (res.data.data.count) {
            this.totalCount = res.data.data.count
            this.biddingItems = res.data.data.rows
            this.paginationFlag = true
            // console.log('哈哈')
            // console.log(this.biddingItems)
          } else {
            console.log('搜索结果为0')
          }
          this.handleHistorySearch()
          this.showLoading = false
        }
      },
      async filterSearch(search_value = this.searchValue,publish_date = this.timeRange) {
        this.searchValue = search_value
        // if (this.searchValue !== '') {
        this.showLoading = true
        let params = {
          lenovoProduct: this.selectedTypePcgData,
          dcgProduct: this.selectedTypeDcgData,
          tags: this.selectedTypeLabelData,
          // type: this.announcementValue,
          status: this.announcementValue,
          search_value: this.searchValue,
          page: this.currentPageValue,
          pageSize: this.showNum,
          username: getUsername(),
          countys: this.level3Arr,
          provinces: this.level1Arr,
          citys: this.level2Arr,
          publish_date,
        }
        // console.log(params)
        let res = await this.axios.post('newBidding/search', params)
        // console.log('哈哈')
        // console.log(res)
        if (res.data.data.count) {
          this.totalCount = res.data.data.count
          this.biddingItems = res.data.data.rows
          // console.log('哈哈')
          // console.log(this.biddingItems)
        } else {
          console.log('搜索结果为0')
          this.biddingItems = []
        }
        this.paginationFlag = true
        // this.handleHistorySearch()
        this.showLoading = false
        // }
      },
      async resetFilterSearch() {
        // console.log('选中的树控件的值')
        // console.log(this.$refs.tree.getCheckedNodes())
        // this.searchValue = search_value
        this.currentPageValue = 1
        this.showNum = 10
        if (this.searchValue !== '') {
          this.showLoading = true
          let params = {
            lenovoProduct: this.selectedTypePcgData,
            dcgProduct: this.selectedTypeDcgData,
            tags: this.selectedTypeLabelData,
            // type: this.announcementValue,
            status: this.announcementValue,
            search_value: this.searchValue,
            page: this.currentPageValue,
            pageSize: this.showNum,
            username: getUsername(),
            countys: this.level3Arr,
            provinces: this.level1Arr,
            citys: this.level2Arr,
            publish_date: this.timeRange,
          }
          // console.log(params)
          let res = await this.axios.post('newBidding/search', params)
          console.log('哈哈')
          console.log(res)
          if (res.data.data.count) {
            this.totalCount = res.data.data.count
            this.biddingItems = res.data.data.rows
            // console.log('哈哈')
            // console.log(this.biddingItems)
          } else {
            console.log('搜索结果为0')
            this.biddingItems = []
          }
          // this.handleHistorySearch()
          this.showLoading = false
        } else {
          this.$message({
            message: '请先输入内容',
            type: 'warning'
          });
        }
      },
      // 搜索历史接口
      async handleHistorySearch() {
        let res = await this.axios.post('user/get_keyword.do', {
          flag: 3
        })
        // console.log('搜索历史接口')
        // console.log(res)
        let resData = res.data.data
        resData = resData.filter(item => {
          return item !== ''
        })
        this.searchTipsTag = resData
      },
      async deleteAll() {
        let res = await this.axios.post('search/delMoreSearchHistory.do', {flag: 3})
        this.handleHistorySearch()
      },
      // // 公告类型
      // async loadAnnouncementOptions() {
      //   let res = await this.axios.post('bidding/tabControl')
      //   let resData = res.data.data
      //   // console.log('公告类型')
      //   // console.log(resData)
      //   this.announcementOptions = resData.status.map(item => {
      //     return { value: item, label: item }
      //   })
      //   this.keyWords = resData.keywords
      // },
      // 地区
      async loadRegionOptions() {
        let res = await this.axios.post('bidding/selectRegionAll', {})
        console.log('地区')
        console.log(res)
        let resData = res.data.data
        if (resData.length !== 0) {
          this.regionOptions = resData
          this.regionDatas = resData
        } else {
          console.log('地区数据为0')
        }
      },
      async loadDetail(idParmas) {
        let res = await this.axios.post('bidding/bidDetail', {
          id: idParmas
        })
        console.log(res)
        let resData = res.data.data
        console.log(resData)
        this.detailContent = resData.content_html
      },
      // 初始化详情接口
      async initDetialData() {
        this.showLoading = true
        let params = {
          lenovoProduct: [],
          dcgProduct: [],
          tags: [],
          // type: this.announcementValue,
          status: [],
          search_value: '',
          page: this.currentPageValue,
          pageSize: this.showNum,
          username: getUsername(),
          countys: [],
          provinces: [],
          citys: [],
          publish_date: [],
        }
        let res = await this.axios.post('newBidding/search', params)
        let resData = res.data.data
        this.totalCount = resData.count
        this.biddingItems = resData.rows
        this.paginationFlag = false // 隐藏分页组件
        this.showLoading = false
      },
      // 获得分类接口数据
      async getTabControlData() {
        // let res = await this.axios.post('newBidding/tabControl', {})
        let res = await this.axios.post('newBidding/tabControl', {})
        let resData = res.data.data
        this.pcgData = resData.pcgProduct.map(item => {
          return {
            value: item,
            flag: false
          }
        })
        this.dcgData = resData.dcgProduct.map(item => {
          return {
            value: item,
            flag: false
          }
        })
        this.labelData = resData.tags.map(item => {
          return {
            value: item,
            flag: false
          }
        })
        this.announcementOptions = resData.status.map(item => {
          return {
            value: item,
            label: item
          }
        })
      }
    },
    created() {
      this.handleHistorySearch()
      this.initDetialData()
      this.getTabControlData()
      this.loadRegionOptions()
    },
    mounted() {
      // this.handleHistorySearch()
      // this.loadAnnouncementOptions()
      // this.loadRegionOptions()
    }
  }
</script>

<style lang="scss" scoped>
  .bidding {
    padding: 15px 41px;
    .mailDialog-module {
      .key-div {
        margin-top: 30px;
        .type-selected {
          background-color: #0099ff;
          color: #fff !important;
          border-radius: 10px;
          padding: 2px 8px;
          box-sizing: content-box;
        }
        .not-allowed {
          background-color: #f4f4f5 !important;
          color: #bcbecc !important;
          cursor: not-allowed !important;
        }
        .type-title {
          display: inline-block;
          width: 100px;
          font-size: 16px;
          /*font-size: 12px;*/
          color: #000;
          font-family: Arial-BoldMT;
          font-weight: bold;
        }
        .type-item {
          padding: 2px 8px;
          box-sizing: content-box;
          display: inline-block;
          /*width: 60px;*/
          height: 20px;
          line-height: 20px;
          text-align: center;
          /*margin-right: 45px;*/
          margin-right: 20px;
          margin-bottom: 20px;
          border-radius: 10px;
          font-size: 12px;
          color: #999;
          font-family: MicorsoftYaHei;
          cursor: pointer;
          // 禁止选中文本
          -moz-user-select: none; /*火狐*/
          -webkit-user-select: none; /*webkit浏览器*/
          -ms-user-select: none; /*IE10*/
          -khtml-user-select: none; /*早期浏览器*/
          user-select: none;
        }
        .key-word {
          &:after {
            clear: both;
            content: '';
            display: block;
          }
          .type-title {
            float: left;
          }
          .fr-div {
            float: right;
            margin-left: 50px;
          }
        }
      }
      .mail-div {
        /*margin-left: 30px;*/
        clear: both;
        .el-input {
          /*width: 374px;*/
          /*width: 455px;*/
          width: 490px;
        }
      }
    }
    .detailDialog-module {
      .dialog-title {
        .collection-detail {
          color: #f0ba00;
        }
      }
      .content {
        font-size: 14px;
        font-family: MicorsoftYaHei;
        color: #666;
        text-align: left;
        /*以下所有样式均为配套爬虫数据*/
        /deep/ #wen {
          table {
            width: 100%;
          }
        }
      }
    }
    .title-module {
      margin-bottom: 20px;
      h2, p {
        margin: 0;
        padding: 0;
      }
      h2 {
        display: inline-block;
        font-size: 20px;
        font-family: OpenSansShin;
        color: #333;
      }
      p {
        display: inline-block;
        margin-top: 7px;
        float: right;
        span {
          color: #0090e9;
          font-family: MicorsoftYaHei;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
    .search-module {
      background-color: #fff;
      /*height: 222px;*/
      min-height: 222px;
      padding: 15px 20px;
      box-shadow: 2px 2px 10px rgba(224, 226, 234, 0.6);
      border-radius: 6px;
      .input-div {
        width: 400px;
        height: 40px;
        .el-input {
          .el-input-group__append {
            background-color: #0099ff !important;
          }
        }
      }
      .tag-div {
        margin-top: 5px;
        color: #333;
        font-size: 12px;
        font-family: MicorsoftYaHei;
        .tag-item {
          margin-right: 15px;
          cursor: pointer;
          font-size: 12px;
          color: #999;
          display: inline-block;
          margin-bottom: 5px;
        }
        .delete {
          color: #0090e9;
          font-size: 12px;
          text-decoration: underline;
          cursor: pointer;
        }
      }
      .key-div {
        margin-top: 30px;
        .type-selected {
          background: rgba(16, 142, 233, 0.12);
          border-radius: 15px;
          font-family: OpenSans;
          font-size: 12px;
          color: #108EE9 !important;
          padding: 2px 8px;
          box-sizing: content-box;
        }
        .not-allowed {
          background-color: #f4f4f5 !important;
          color: #bcbecc !important;
          cursor: not-allowed !important;
        }
        .type-title {
          display: inline-block;
          width: 50px;
          /*font-size: 16px;*/
          font-size: 14px;
          color: #333;
          font-family: OpenSans-Bold;
          font-weight: bold;
          cursor: pointer;
        }
        .type-detial {
          margin-left: 60px;
          position: relative;
          bottom: 2px;
        }
        .type-item {
          padding: 2px 8px;
          box-sizing: content-box;
          display: inline-block;
          /*width: 60px;*/
          height: 20px;
          line-height: 20px;
          text-align: center;
          /*margin-right: 45px;*/
          margin-right: 20px;
          margin-bottom: 20px;
          border-radius: 10px;
          font-size: 12px;
          color: #666;
          font-family: OpenSans;
          cursor: pointer;
          // 禁止选中文本
          -moz-user-select: none; /*火狐*/
          -webkit-user-select: none; /*webkit浏览器*/
          -ms-user-select: none; /*IE10*/
          -khtml-user-select: none; /*早期浏览器*/
          user-select: none;
        }
        .key-word {
          &:after {
            clear: both;
            content: '';
            display: block;
          }
          .type-title {
            float: left;
          }
          .fr-div {
            float: right;
            margin-left: 50px;
          }
        }
        .text-btn {
          position: absolute;
          right: 0;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #108EE9;
          text-decoration: underline;
        }
      }
    }
    .select-module {
      background-color: #fff;
      height: 80px;
      line-height: 50px;
      margin-top: 15px;
      padding: 15px 20px;
      box-shadow: 2px 2px 10px rgba(224, 226, 234, 0.6);
      border-radius: 6px;
      .child-module {
        /*display: inline-block;*/
        position: relative;
        .el-select, .el-cascader {
          /*width: 130px;*/
          width: 150px;
        }
        .el-tree {
          position: absolute;
          left: 50px;
          top: 50px;
          z-index: 2;
          width: 80%;
          height: 160px;
          overflow: auto;
          border: 1px solid #dfe4ed;
          border-radius: 4px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
          display: none;
        }
        span {
          margin-right: 20px;
        }
      }
      .region-div {
        .el-input {
          width: 150px;
        }
      }
      .show {
        display: block !important;
      }
    }
    .paging-module {
      margin-top: 80px;
      text-align: center;
    }
  }
</style>
